<script lang="ts" setup>
import { getPointByTag, getQuestionByPoint } from '@/api/point';
import type { pointForm, questionForm, tagForm } from '@/api/type';
import { usePointStore } from '@/stores/point';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref } from 'vue';

const tags = reactive<tagForm[]>(usePointStore().tag);
const pointList = ref<pointForm[]>([])
const selectedTagId = ref<number>(1) // 默认选中的标签ID
const selectedPointId = ref<number>(1)//默认选中的知识点Id
const questionsList = ref<questionForm[]>([])
const firstQuestionList = async () => {
    let res = await getQuestionByPoint(1);
    questionsList.value = res.data;
}
const firstPoints = async () => {
    let res = await getPointByTag(1);
    pointList.value = res.data
}
// 选择事件
// const selectedOptions = ref();
const selectTag = async (tagId: number) => {
    // 点击标签时更新选中的标签ID
    selectedTagId.value = tagId;
    let res = await getPointByTag(tagId);
    pointList.value = res.data
}
const selectPoint = async (pointId: number) => {
    selectedPointId.value = pointId;
    let res = await getQuestionByPoint(pointId);
    questionsList.value = res.data
}
const submitAnswer = (questionId: number) => {
    const question = questionsList.value.find(item => item.id === questionId);
    if (question) {
        const selectedOption = question.select;
        let answer = '';
        switch (selectedOption) {
            case 1:
                answer = 'A';
                break;
            case 2:
                answer = 'B';
                break;
            case 3:
                answer = 'C';
                break;
            case 4:
                answer = 'D';
                break;
        }
        if (answer === question.answer) {
            ElMessage.success('回答正确！');

        } else {
            ElMessage.error('回答错误！');
        }
    } else {
        console.log("没存到数据");

    }
};
onMounted(() => {
    firstPoints();
    firstQuestionList();
})
</script>
<template>
    <div class="main">
        <el-card class="tag">
            <p style="font-weight: bold;">标签分类</p>
            <el-divider />
            <el-scrollbar style="height: 62vh;">
                <p v-for=" item in tags" :key="item.id" @click="selectTag(item.id)" style="cursor: pointer;"
                    :class="{ 'selected': selectedTagId === item.id }">{{ item.name }}</p>
            </el-scrollbar>
        </el-card>
        <div class="content">
            <el-scrollbar height="90vh">
                <el-card style="width:100%;" shadow="hover">
                    <el-scrollbar>
                        <div class="scrollbar-flex-content">
                            <p v-for="item in pointList" :key="item.id" @click="selectPoint(item.id as number)"
                                style="cursor: pointer;" class="scrollbar-item"
                                :class="{ 'select-item': selectedPointId === item.id }">
                                {{ item.name }}
                            </p>
                        </div>
                    </el-scrollbar>
                    <div class="test">
                        <template v-for="(item) in questionsList" :key="item.id" style="max-width: 80%;">
                            <h4>{{ item.content }}</h4>
                            <el-radio-group v-model="item.select" style="max-width: 80%;">
                                <el-radio :value="1">A. {{ item.option1 }}</el-radio>
                                <el-radio :value="2">B. {{ item.option2 }}</el-radio>
                                <el-radio :value="3">C. {{ item.option3 }}</el-radio>
                                <el-radio :value="4">D. {{ item.option4 }}</el-radio>
                            </el-radio-group>
                            <el-button @click="() => submitAnswer(item.id as number)">提交</el-button>
                        </template>
                    </div>
                </el-card>
            </el-scrollbar>
        </div>
    </div>
</template>

<style scoped>
.main {
    display: flex;
    height: 80vh;
    justify-content: center;
    flex-wrap: wrap;
}

.selected {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width: 100px;
    height: 50px;
    margin: 10px; */
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
}

.content {
    margin-left: 30px;
    padding-top: 10px;
    width: 50%;
}

.scrollbar-flex-content {
    display: flex;
}

.select-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    /* color: var(--el-color-danger); */
}

.scrollbar-item {
    width: 100px;
    height: 50px;
    margin: 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 4px;
}
</style>
